<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单</title>
</head>
<body>
    <form action="http://www.baidu.com" method="post">
        <!-- input 相关控件 -->
        <input type="text" name="username" id="" size="15" maxlength="30"/>  <!--单行文本框 -->
        <input type="password" name="username" id="" size="15" maxlength="30"/>  <!-- 密码框 -->
        <input type="radio" name="genre" value="rock" checked="checked"/>   <!-- 单选按钮 -->
        <input type="checkbox" name="service" value="spotify" checked="checked"/> <!-- 复选按钮 -->
        <input type="file" name="user-song"/>  <!-- 文件上传 -->
        <input type="submit" name="subscribe" value="subscribe"/> <!-- 提交按钮 name非必须-->
        <input type="image" src="images/subscribe.jpg" width="100" height="20" /> <!-- 将提交按钮变成图像展示 -->
        <input type="hidden" name="bookmark" value="lyrics"/><!-- 隐藏域 允许网页设计人员向表单中添加用户不能看到的值 -->


        <!-- 文本域 cols特性指定文本域有多宽，rows特性指定文本域在纵向上占据的行数 -->
        <textarea name="" id="" cols="30" rows="10">Enter your comments</textarea>
        <!-- 通常情况下会在用户单击文本域之后 使用js将预设内容删除 -->

        <!-- 下拉和多选列表框 select-->
        <select name="devices">
            <option value="ipod" selected="selected">ipod</option>
            <option value="radio">radio</option>
            <option value="computer">computer</option>
        </select>
        <!-- 多选框size显示多个选项，设置multiple允许用户从这一列表选择多个选项 -->
        <select name="instruments" size="3" multiple="multiple">
            <option value="guita" selected="selected">Guita</option>
            <option value="drums">drums</option>
            <option value="bass">Bass</option>
        </select>

        <!-- label标签 label标签是为了方便视力受损的人也可以访问表单 -->
        <!-- label两种用法 第一种直接在控件之外,另一种使用for属性指定控件的id -->

        <!-- HTML5特性 -->
        <!-- 表单验证  日期控件 电子邮件和URL输入 搜索输入控件 -->



    </form>
</body>
</html>